<template>
	<view class="bankCardBinding">
		<custom-header title="我的银行卡" />
		<view class="_wrap">
			<view class="header_title">
				银行卡绑定
			</view>
			<view class="form_wrap">
				<view class="form_item">
					<view class="label">开户姓名</view>
					<view class="value">
						<input type="text" v-model="name" placeholder="请输入姓名" />
					</view>
				</view>
				<view class="form_item">
					<view class="label">银行卡号</view>
					<view class="value">
						<input type="number" v-model="cardNo" placeholder="请输入银行卡号" />
					</view>
				</view>
				<view class="form_item">
					<view class="label">银行预留手机</view>
					<view class="value">
						<input type="number" v-model="phone" placeholder="请输入手机号码" />
					</view>
				</view>
				<view class="form_item code">
					<view class="label">验证码</view>
					<view class="value">
						<input type="number" v-model="smsCode" placeholder="请输验证码" />
					</view>
					<view 
						class="btn"
						hover-class="confirm_hover" 
						@click="getVerificationCode"
						:hover-stay-time="200">
							获取验证码
					</view>
				</view>
			</view>
			<!-- <view class="btn_wrap">
				<button
					size="default" 
					type="default" 
					class="btn" 
					:class="{'btn_disable':btnBisabled}"
					hover-class="confirm_hover" 
					:hover-stay-time="200" 
					@click="handleSubmit"
					:disabled="btnLoading || btnBisabled"
					:loading="btnLoading">提交签约</button>
			</view> -->
			<view class="footer_btn_wrap">
				<view class="btn_wrap">
					<button
						size="default" 
						type="default" 
						class="btn confirm" 
						:class="{'btn_disable':btnBisabled}"
						hover-class="confirm_hover" 
						:hover-stay-time="200" 
						@click="handleSubmit"
						:disabled="btnLoading || btnBisabled"
						:loading="btnLoading">提交签约</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { computed, ref, onMounted,onUnmounted } from 'vue'
	import { isvalidPhoneNumber } from '../../utils/validate.js'
	import supplierApi from '@/api/supplier'
	
	const isCounting = ref(false)

	// 表单参数
	const name = ref('')
	const phone = ref('')
	const cardNo = ref('')
	const smsCode = ref('')


		// 计算按钮文本
	const buttonText = computed(() => {
	  if (isCounting.value) {
		return `(${countdown.value}S)重新获取`
	  }
	  return countdown.value === 0 ? '重新获取' : '获取验证码'
	})
	
	
// 获取验证码
	const getVerificationCode = async () => {
		
	  if (isCounting.value) return
	  
	  if (!phone.value) {
			uni.showToast({
				title: '请输入手机号码',
				icon: 'none'
			})
			return
	  }
	  
	  if (!isvalidPhoneNumber(phone.value)) {
			uni.showToast({
				title: '手机号码格式不正确',
				icon: 'none'
			})
	  		return
	  }
	  
	try {
		// 显示加载状态
		uni.showLoading({
			title: '发送中...'
		})

		const result = await supplierApi.sendAllinMemberPhoneCode()
		// 显示成功提示
		uni.showToast({
			title: '验证码发送成功',
			icon: 'success'
		})

		// 开始倒计时
		startCountdown()

	  } catch (error) {
		console.error('获取验证码失败:', error)
			uni.showToast({
				title:  error.message || '验证码发送失败，请重试',
				icon: 'none'
			})

	  } finally {
		// 隐藏加载状态
		uni.hideLoading()
	  }
	}

	// 开始倒计时
	const startCountdown = () => {
	  isCounting.value = true
	  countdown.value = totalTime.value
	  
	  // 设置定时器
	  const timer = setInterval(() => {
		countdown.value--
		
		if (countdown.value <= 0) {
		  clearInterval(timer)
		  isCounting.value = false
		}
	  }, 1000)
	  
	  // 存储定时器以便清理
	  timerRef.value = timer
	}
	
	// 存储定时器引用
	const timerRef = ref(null)
	
	// 组件卸载时清除定时器
	onUnmounted(() => {
	  if (timerRef.value) {
		clearInterval(timerRef.value)
	  }
	})
	

	// 校验
	const validateForm = () =>{
		if (!name.value.trim()) {
			uni.showToast({
				title: '请输入开户姓名',
				icon: 'none'
			})
			return false 
		}

		if (!cardNo.value.trim()) {
			uni.showToast({
				title: '请输入银行卡号',
				icon: 'none'
			})
			return false 
		}

		if (!phone.value.trim()) {
			uni.showToast({
				title: '请输入手机号码',
				icon: 'none'
			})
			return false 
		}

		if (!smsCode.value.trim()) {
			uni.showToast({
				title: '请输入验证码',
				icon: 'none'
			})
			return false 
		}

		return true
	}

	// 提交签约
	const btnBisabled = ref(false)
	const btnLoading = ref(false)

	const handleSubmit = async () => {

		if(!validateForm())return

		if (btnLoading.value) {
			return
		}

		try {
			btnLoading.value = true
			const bindData = {
				name: name.value.trim(),
				cardNo: cardNo.value.trim(),
				phone: phone.value.trim(),
				smsCode: smsCode.value.trim()
			}

			const result = await supplierApi.bindAllinBankCard(bindData)

			// 跳转
			uni.navigateTo({
				url: `/pages/bankCardBindingSuccess/bankCardBindingSuccess?id=${result.id}`
			})

		} catch (error) {
			console.error('银行卡绑定失败:', error)
			uni.showToast({
				title: error.message,
				icon: 'none'
			})

		} finally {
			btnLoading.value = false
		}
	}
</script>

<style lang="scss">
	.bankCardBinding{
		min-height: 100vh;
		background: #fff;
	}
	._wrap{
		padding: 0 30rpx;
	}
	.header_title{
		font-size: 48rpx;
		color: #333333;
		text-align: center;
		padding: 100rpx 0;
	}
	.form_wrap{
		border-top:1px solid #eee;
		.form_item{
			display: flex;
			align-items: center;
			border-bottom:1px solid #eee;
			padding:30rpx 0;
			.label{
				font-size: 32rpx;
				color: #333333;
				width: 230rpx;
				font-weight: bold;
			}
		}
		.code{
			.value{
				flex: 1;
				input{
					width: 100%;
				}
			}
			.btn{
				width: 140rpx;
				text-align: center;
				height: 52rpx;
				line-height: 52rpx;
				border-radius: 10rpx;
				background: #F5564D;
				font-size: 24rpx;
				color: #fff;
			}
		}
	}
	.footer_btn_wrap{
		height: 128rpx;
		padding-top: 200rpx;
		box-sizing: border-box;
		.btn_wrap{
			height: 100%;
			align-items: center;
			display: flex;
			padding: 0 40rpx;
			.btn{
				width: 348rpx;
				border-radius: 10rpx;
				background: #F5564D;
				font-size: 32rpx;
				color: #fff;
			}
		}
	}
	.input-placeholder,.textarea-placeholder{
		font-size: 32rpx;
		color: #ccc;
	}
	input,textarea{
		font-size:32rpx;
		color: #666;
	}
</style>
